<template>
  <view class="container">
    <view class="game-info">
      <text>当前玩家：{{ currentPlayer === 'B' ? '黑棋' : '白棋' }}</text>
      <text>剩余悔棋次数：{{ undoCount }}</text>
    </view>
    <view class="board">
      <view v-for="(row, rowIndex) in boardSize" :key="rowIndex" class="board-row">
        <view v-for="(col, colIndex) in boardSize" :key="'a'+colIndex" class="board-col" @click="placePiece(rowIndex, colIndex)" :ref="`cell_${rowIndex}_${colIndex}`">
          <view v-if="board[rowIndex][colIndex] === 'B'" class="piece black"></view>
          <view v-if="board[rowIndex][colIndex] === 'W'" class="piece white"></view>
		  
        </view>
      </view>
    </view>
    <button @click="undoMove">悔棋</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      boardSize: 15,
      board: [],
      currentPlayer: 'B',
      moveHistory: [],
      undoCount: 3,
    };
  },
  mounted() {
    this.initBoard();
  },
  methods: {
    initBoard() {
      this.board = Array(this.boardSize).fill().map(() => Array(this.boardSize).fill(''));
	  console.log(this.board);
    },
    placePiece(row, col) {
      if (this.board[row][col] === '' && this.currentPlayer === 'B') {
        this.board[row][col] = this.currentPlayer;
        this.moveHistory.push({ row, col, player: this.currentPlayer });
        this.createRippleEffect(row, col);
        if (this.checkForWin(row, col)) {
          alert(`${this.currentPlayer} wins!`);
          this.initBoard();
        } else {
          this.currentPlayer = 'W';
          this.aiMove();
        }
      }
    },
    createRippleEffect(row, col) {
   //    const ripple = document.createElement('view');
   //    ripple.className = 'ripple';
   //    const cell = this.$refs[`cell_${row}_${col}`][0];
	  // console.log("xxx",cell);
   //    cell.appendChild(ripple);
   //    setTimeout(() => {
   //      ripple.remove();
   //    }, 600); // 动画持续时间
    },
    aiMove() {
      let emptyCells = [];
      this.board.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell === '') {
            emptyCells.push({ rowIndex, colIndex });
          }
        });
      });
      if (emptyCells.length > 0) {
        let randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        this.board[randomCell.rowIndex][randomCell.colIndex] = 'W';
        this.moveHistory.push({ row: randomCell.rowIndex, col: randomCell.colIndex, player: this.currentPlayer });
        if (this.checkForWin(randomCell.rowIndex, randomCell.colIndex)) {
          alert('AI wins!');
          this.initBoard();
        }
      }
      this.currentPlayer = 'B';
    },
    checkForWin(row, col) {
      return (
        this.checkLine(row, col, -1, 0) + this.checkLine(row, col, 1, 0) > 4 ||
        this.checkLine(row, col, 0, -1) + this.checkLine(row, col, 0, 1) > 4 ||
        this.checkLine(row, col, -1, -1) + this.checkLine(row, col, 1, 1) > 4 ||
        this.checkLine(row, col, -1, 1) + this.checkLine(row, col, 1, -1) > 4
      );
    },
    checkLine(row, col, dRow, dCol) {
      let total = 0;
      let r = row + dRow;
      let c = col + dCol;
      while (r >= 0 && r < this.boardSize && c >= 0 && c < this.boardSize && this.board[r][c] === this.currentPlayer) {
        total++;
        r += dRow;
        c += dCol;
      }
      return total;
    },
    undoMove() {
      if (this.undoCount > 0 && this.moveHistory.length > 0) {
        let lastMove = this.moveHistory.pop();
        this.board[lastMove.row][lastMove.col] = '';
        this.undoCount--;
        alert(`悔棋成功，你还剩下 ${this.undoCount} 次悔棋机会。`);
        this.currentPlayer = lastMove.player;
      } else {
        alert('你不能再悔棋了！');
      }
    },
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.game-info {
  margin-bottom: 10px;
}
.board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  width: 450px;
  height: 450px;
  border: 5px solid #764c24;
  background-image: url('../../static/goBangBg.jpg');
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.board-row {
  /* display: flex; */
  width: 100%;
  border: 1px solid #ddd;
}
.board-col {
  border: 1px solid #ddd;
  position: relative;
  aspect-ratio: 1;
}
.piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.black {
  background-color: #000;
}
.white {
  background-color: #fff;
}
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  animation: ripple 0.6s linear;
}
</style>
